<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-07 16:16:08
 -->
<template>
  <div>
    <el-main>
      <el-card shadow="never" class="clearfix">
        <div>
          <el-button
            type="primary"
            @click="btnAddData"
          >
            新增分类
          </el-button>
          <el-button
            type="default"
            @click="btnUpdateData"
          >
            编辑分类
          </el-button>
          <el-button
            type="danger"
            @click="btnDelData"
          >
            删除分类
          </el-button>
        </div>
        <el-row>
          <el-col :span="12">
            <cate-tree ref="cateTree" :is-oper="false" class="margin-t20" />
          </el-col>
          <el-col :span="12" class="padding20">
            <h3>提示：</h3>
            <p>
              1、选中分类后，点击【新增分类】可以添加子分类，点击【编辑分类】可以进行重命名，点击【删除分类】则直接删除。
            </p>
            <p>
              2、您还可以直接拖动分类调整层级。
            </p>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </div>

</template>
<script>
import { oftenuse } from '@/libs/mixins'
import CateTree from './cate-tree.vue'

export default {
  name: 'GoodCatList',
  components: { CateTree },
  mixins: [oftenuse],
  props: {
  },
  data() {
    return {
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    btnAddData() {
      this.$refs.cateTree.$refs.cateTree.addData()
    },
    btnUpdateData() {
      this.$refs.cateTree.$refs.cateTree.updateData()
    },
    btnDelData() {
      this.$refs.cateTree.$refs.cateTree.delData()
    }
  }
}
</script>

<style>
/* .notice{
    font-size: 14px; line-height: 24px;
} */
</style>
